<template>
    <div class="setbox" >
        <a-form :labelCol="{span:3}"  :model="formdata" :rules="rules"  @finish="tosub">
            <a-form-item hasFeedback name="sitename" label="网站名称">
                <a-input  v-model:value="formdata.sitename" />
            </a-form-item>
            <a-form-item hasFeedback name="tel" label="联系电话">
                <a-input class="w250"  v-model:value="formdata.tel" />
            </a-form-item>
            <a-form-item hasFeedback name="qqwx" label="联系QQ">
                <a-input class="w250"  v-model:value="formdata.qqwx" />
            </a-form-item>
            <a-form-item hasFeedback name="company" label="公司名称">
                <a-input class="w250"  v-model:value="formdata.company" />
            </a-form-item>
            <a-form-item hasFeedback name="domain" label="网站域名">
                <a-input class="w250" v-model:value="formdata.domain" />
            </a-form-item>
            <a-form-item hasFeedback name="path" label="路径">
                <a-input class="w50"  v-model:value="formdata.path" />
            </a-form-item>
            <a-form-item hasFeedback name="beian" label="备案号">
                <a-input class="w250"  v-model:value="formdata.beian" />
            </a-form-item>
            <a-form-item hasFeedback name="email" label="邮箱">
                <a-input class="w250" v-model:value="formdata.email" />
            </a-form-item>
            <a-form-item hasFeedback name="footmsg" label="底部信息">
                <a-input v-model:value="formdata.footmsg" />
            </a-form-item>
            <a-form-item class="text-center">
                <a-button type="primary" html-type="submit">确认修改</a-button>               
            </a-form-item>            
        </a-form>
    </div>

</template>
<style lang="less" scoped>
.setbox{
    padding:50px 20px; max-width: 780px; margin: 0 auto;
    
    .text-center{
    text-align: center;
    }

    .w250{
    width:250px
    }

    .w50{
        width: 90px;
    }
}
</style>
<script>
import { defineComponent, reactive,ref, toRaw } from 'vue';
import { siteSet } from '@/api/site';
import { message } from 'ant-design-vue';

export default defineComponent({
    setup() {
        const formdata=reactive({
            sitename:'',
            tel:'',
            qqwx:'',
            company:'',
            domain:'',
            path:'',
            beian:'',
            email:''
        });
         

         message.config({top:'200px',duration:1.2});

        siteSet({}).then(
            res=>{                
                if(res.data['code']==200)
                {
                    Object.assign(formdata,res.data['data']);
                }
                else{
                    message.error('返回站点信息错误');
                }
            },
            err=>{
                console.log(err);
            }
        )

        const tosub= () =>{
            console.log('----');
            let obj=toRaw(formdata);
            siteSet(obj).then(
                res=>{
                    if(res.data['code']==200){
                        message.success('成功修改');
                    }
                    else{
                        message.error('错误:'+res.data['msg']);
                    }
                },
                err=>{
                    console.log(err);
                }
            )
        };

        const checkval= async (_rules,val) =>{
            if(!val)
            {
                return Promise.reject('不能为空');
            }
            return Promise.resolve();
        };

        const rules={
            sitename:[{required:true,validator:checkval,trigger:'blur'}],
            domain:[{require:true,validator:checkval,trigger:'blur'}],
            path:[{required:true,validator:checkval,trigger:'blur'}]
        }

        return{
            formdata,tosub,rules
        }
    },
})
</script>
